<template>
	<view class="container" 
		@touchstart="handleTouchStart"
		@touchmove="handleTouchMove" 
		@touchend="handleTouchEnd">
		<view class="nav-bar">
			<view class="status-bar"></view>
			<view class="nav-content">
				<text class="page-title">评分</text>
				<view class="tab-row">
					<view class="tab" :class="{active: activeTab === 0}" @tap="switchTab(0)">乘务长</view>
					<view class="tab" :class="{active: activeTab === 1}" @tap="switchTab(1)">其他评分</view>
				</view>
				
				<!-- 滑动提示 -->
				<view class="swipe-hint" v-if="showSwipeHint">
					<text class="hint-text">👈 左滑切换tab/页面，右滑返回 👉</text>
				</view>
			</view>
		</view>
		<view class="search-box" v-if="activeTab === 0">
			<view class="search-input">
				<view class="company-select" @tap="showCompanyPicker">
					<text>{{ selectedCompany }}</text>
					<uni-icons type="bottom" size="14" color="#666"></uni-icons>
				</view>
				<input type="text" placeholder="输入搜索关键词" v-model="searchKeyword" @confirm="handleSearch" />
			</view>
			<view class="search-btn" @tap="handleSearch">
				<uni-icons type="search" size="16" color="#fff"></uni-icons>
			</view>
		</view>
		
		<view v-if="activeTab === 0">
			<view v-if="!hasSearched" class="empty-state">
				<uni-icons type="search" size="50" color="#ddd"></uni-icons>
				<text class="empty-text">请输入ID或姓名搜索乘务长</text>
			</view>
			
			<view v-if="hasSearched && searchResults">
				<view class="score-card" @click="navigateToDetail({id: searchResults.id})">
					<view class="score-row">
						<view class="id-box">
							<text class="id-label">ID</text>
							<text class="id-value">{{ searchResults.id }}</text>
						</view>
						<view class="score-box">
							<text class="score-value">{{ searchResults.score }}</text>
							<text class="score-unit">分</text>
						</view>
					</view>
					<view class="divider"></view>
					<view class="info-row">
						<view class="type-info">
							<text class="label">理想型:</text>
							<text class="value">{{ searchResults.type }}</text>
						</view>
						<view class="eval-count">
							<text>{{ searchResults.evalCount }}人评价</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 评价统计 - 始终显示 -->
			<view class="stats-card">
				<view class="card-header">
					<text class="title">评价统计</text>
				</view>
				<view class="stats-content">
					<uni-icons type="info" size="20" color="#6c5ce7"></uni-icons>
					<view class="stats-text">
						<text class="stats-number">10,000</text>
						<text class="stats-desc">已收录评价</text>
					</view>
				</view>
			</view>
			
			<!-- 坐标图 - 始终显示 -->
			<view class="chart-card">
				<view class="card-header">
					<text class="title">坐标图</text>
				</view>
				<view class="chart-content">
					<canvas canvas-id="scatterPlot" class="scatter-canvas"></canvas>
					
					<view class="legend">
						<view class="legend-item">
							<view class="color-dot others"></view>
							<text>全部乘务长</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="activeTab === 1">
			<view class="rating-type-selector">
				<scroll-view scroll-x class="rating-type-scroll">
					<view 
						class="rating-type-item" 
						v-for="(item, index) in ratingTypes" 
						:key="index"
						:class="{ active: selectedRatingType === index }"
						@tap="selectRatingType(index)">
						{{ item }}
					</view>
				</scroll-view>
			</view>
			<view class="rating-list">
				<view class="rating-card" v-for="(item, index) in otherRatings" :key="index" @click="navigateToDetail({id: 'other-' + index, ...item})">
					<view class="rating-header">
						<view class="rating-name">
							<text>{{ item.name }}</text>
							<text class="rating-type">{{ ratingTypes[selectedRatingType] }}</text>
						</view>
						<view class="rating-value">{{ item.score }}</view>
					</view>
					<view class="divider"></view>
					<view class="rating-info">
						<view class="rating-counts">
							<view class="count-item">
								<text class="count-label">总评价</text>
								<text class="count-value">{{ item.totalCount }}</text>
							</view>
							<view class="count-item">
								<text class="count-label">好评率</text>
								<text class="count-value positive">{{ item.positiveRate }}%</text>
							</view>
						</view>
						<view class="rating-time">{{ item.updateTime }}</view>
					</view>
				</view>
				
				<view class="load-more" @tap="loadMoreRatings">
					查看更多评分
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			activeTab: 0,
			// 所有乘务长的坐标数据 - 静态数据（与详情页相同）
			allCoordinates: [
				{
					"x": 176.3,
					"y": -189.2,
					"originalScore": -2,
					"label": "用户A"
				},
				{
					"x": -192.7,
					"y": -167.5,
					"originalScore": -2,
					"label": "用户B"
				},
				{
					"x": -112.4,
					"y": -85.1,
					"originalScore": -1,
					"label": "用户C"
				},
				{
					"x": -78.9,
					"y": -132.8,
					"originalScore": -1,
					"label": "用户D"
				},
				{
					"x": -23.5,
					"y": 18.2,
					"originalScore": 0,
					"label": "用户E"
				},
				{
					"x": 31.7,
					"y": -45.9,
					"originalScore": 0,
					"label": "用户F"
				},
				{
					"x": 85.2,
					"y": 112.4,
					"originalScore": 1,
					"label": "用户G"
				},
				{
					"x": 124.8,
					"y": 76.3,
					"originalScore": 1,
					"label": "用户H"
				},
				{
					"x": 178.5,
					"y": 215.7,
					"originalScore": 2,
					"label": "用户I"
				},
				{
					"x": 221.3,
					"y": 189.4,
					"originalScore": 2,
					"label": "用户J"
				}
			],
			scatterData: [], // 保留原有属性以兼容
			selectedCompany: '公司',
			searchKeyword: '',
			hasSearched: false,
			searchResults: null,
			companies: ['全部公司', '中国航空', '南方航空', '东方航空', '海南航空', '四川航空'],
			selectedRatingType: 0,
			ratingTypes: ['美食', '景点', '酒店', '购物', '交通'],
			
			// 滑动相关数据
			showSwipeHint: true,
			startX: 0,
			startY: 0,
			startTime: 0,
			
			// TabBar页面路径配置
			tabPages: [
				'/pages/index/index',        // 0: 打听事
				'/pages/score/index',  // 1: 评分  
				'/pages/schedule/index', // 2: 换班
				'/pages/profile/index'     // 3: 我的
			],
			
			crewList: [
				{
					id: '216999',
					name: '王航',
					score: '9.1',
					type: '高耐心得度，低愤怒外要求度',
					evalCount: 100
				},
				{
					id: '217001',
					name: '李飞',
					score: '8.7',
					type: '高配合度，高服务意识',
					evalCount: 89
				},
				{
					id: '217005',
					name: '张云',
					score: '9.3',
					type: '高沟通力，善解人意',
					evalCount: 112
				},
				{
					id: '217008',
					name: '刘霞',
					score: '8.9',
					type: '高效率，服务周到',
					evalCount: 96
				}
			],
			otherRatings: [
				{
					name: '海底捞火锅',
					score: '8.7',
					totalCount: 156,
					positiveRate: 92,
					updateTime: '2025-10-15'
				},
				{
					name: '故宫博物院',
					score: '9.3',
					totalCount: 278,
					positiveRate: 96,
					updateTime: '2025-10-12'
				},
				{
					name: '香格里拉酒店',
					score: '9.1',
					totalCount: 142,
					positiveRate: 95,
					updateTime: '2025-10-10'
				},
				{
					name: '国金中心购物广场',
					score: '8.5',
					totalCount: 163,
					positiveRate: 90,
					updateTime: '2025-10-08'
				}
			]
		}
	},
	onReady() {
		// 直接绘制坐标图，使用静态数据
		this.$nextTick(() => {
			this.drawChart();
		});
	},
	methods: {
		switchTab(index) {
			this.activeTab = index;
			// 当切换到乘务长标签时，确保重新渲染坐标图
			if (index === 0) {
				this.$nextTick(() => {
					this.drawChart();
				});
			}
		},
		handleSearch() {
			if (this.activeTab === 0) {
				// 乘务长搜索
				if (!this.searchKeyword.trim()) {
					uni.showToast({
						title: '请输入搜索关键词',
						icon: 'none'
					});
					return;
				}
				
				uni.showLoading({
					title: '搜索中...'
				});
				
				// 模拟搜索过程
				setTimeout(() => {
					// 找到匹配的乘务长数据
					const result = this.crewList.find(item => 
						item.name.includes(this.searchKeyword) || 
						item.id.includes(this.searchKeyword)
					);
					
					this.hasSearched = true;
					this.searchResults = result || this.crewList[0]; // 如果没找到，默认显示第一个
					
					uni.hideLoading();
					
					if (this.activeTab === 0) {
						this.$nextTick(() => {
							this.drawChart();
						});
					}
					
					console.log('搜索:', this.searchKeyword, '公司:', this.selectedCompany, '结果:', this.searchResults);
				}, 500);
			} else {
				// 其他评分搜索
				this.handleOtherSearch();
			}
		},
		// 处理其他评分的搜索
		handleOtherSearch() {
			if (!this.searchKeyword.trim()) {
				uni.showToast({
					title: '请输入搜索关键词',
					icon: 'none'
				});
				return;
			}
			
			uni.showLoading({
				title: '搜索中...'
			});
			
			// 模拟搜索过程
			setTimeout(() => {
				// 查找匹配的其他评分
				const results = this.otherRatings.filter(item => 
					item.name.includes(this.searchKeyword)
				);
				
				if (results.length > 0) {
					// 临时保存原始数据
					if (!this._originalOtherRatings) {
						this._originalOtherRatings = [...this.otherRatings];
					}
					
					// 更新显示的评分列表
					this.otherRatings = results;
					
					uni.showToast({
						title: `找到${results.length}个结果`,
						icon: 'success'
					});
				} else {
					uni.showToast({
						title: '未找到匹配结果',
						icon: 'none'
					});
				}
				
				uni.hideLoading();
			}, 500);
		},
		showCompanyPicker() {
			uni.showActionSheet({
				itemList: this.companies,
				success: (res) => {
					this.selectCompany(this.companies[res.tapIndex]);
				}
			});
		},
		selectCompany(company) {
			this.selectedCompany = company;
		},
		selectRatingType(index) {
			this.selectedRatingType = index;
			console.log('加载评分类型:', this.ratingTypes[index]);
		},
		loadMoreRatings() {
			uni.showLoading({
				title: '加载中...'
			});
			
			setTimeout(() => {
				const newRatings = [
					{
						name: '长隆海洋公园',
						score: '8.9',
						totalCount: 147,
						positiveRate: 94,
						updateTime: '2025-10-05'
					},
					{
						name: '北京大兴机场',
						score: '9.0',
						totalCount: 152,
						positiveRate: 95,
						updateTime: '2025-10-03'
					}
				];
				
				this.otherRatings = [...this.otherRatings, ...newRatings];
				
				uni.hideLoading();
			}, 800);
		},
		drawChart() {
			console.log('开始绘制评分页坐标图...');
			console.log('当前坐标数据:', this.allCoordinates.length, '个数据点');
			
			const ctx = uni.createCanvasContext('scatterPlot', this);
			const canvasW = 400;
			const canvasH = 400;
			const padding = 25; // 与详情页保持一致
			const chartW = canvasW - padding * 2;
			const chartH = canvasH - padding * 2;
			
			// 坐标系配置 - 与详情页保持一致
			const minCoord = -250; // 显示范围最小值
			const maxCoord = 250;  // 显示范围最大值
			const coordRange = maxCoord - minCoord; // 坐标范围：500
			
			// 清除画布
			ctx.clearRect(0, 0, canvasW, canvasH);
			
			// 绘制背景
			ctx.beginPath();
			ctx.setFillStyle('#fafafa');
			ctx.fillRect(0, 0, canvasW, canvasH);
			
			// 绘制网格线
			ctx.beginPath();
			ctx.setStrokeStyle('#f0f0f0');
			ctx.setLineWidth(1);
			
			// 垂直网格线 (每100单位一条)
			for (let coord = minCoord; coord <= maxCoord; coord += 100) {
				const x = padding + (coord - minCoord) / coordRange * chartW;
				ctx.moveTo(x, padding);
				ctx.lineTo(x, padding + chartH);
			}
			
			// 水平网格线 (每100单位一条)
			for (let coord = minCoord; coord <= maxCoord; coord += 100) {
				const y = padding + (maxCoord - coord) / coordRange * chartH; // Y轴翻转
				ctx.moveTo(padding, y);
				ctx.lineTo(padding + chartW, y);
			}
			ctx.stroke();
			
			// 绘制坐标轴
			ctx.beginPath();
			ctx.setStrokeStyle('#333');
			ctx.setLineWidth(2);
			
			// X轴 (y=0的位置)
			const centerY = padding + (maxCoord - 0) / coordRange * chartH;
			ctx.moveTo(padding, centerY);
			ctx.lineTo(padding + chartW, centerY);
			
			// Y轴 (x=0的位置) 
			const centerX = padding + (0 - minCoord) / coordRange * chartW;
			ctx.moveTo(centerX, padding);
			ctx.lineTo(centerX, padding + chartH);
			ctx.stroke();
			
			// 绘制坐标轴箭头
			const arrowSize = 8; // 箭头大小
			
			// X轴正方向箭头（右端）
			ctx.beginPath();
			ctx.setFillStyle('#333');
			ctx.moveTo(padding + chartW, centerY); // 箭头顶点
			ctx.lineTo(padding + chartW - arrowSize, centerY - arrowSize/2); // 左上角
			ctx.lineTo(padding + chartW - arrowSize, centerY + arrowSize/2); // 左下角
			ctx.closePath();
			ctx.fill();
			
			// Y轴正方向箭头（上端）
			ctx.beginPath();
			ctx.setFillStyle('#333');
			ctx.moveTo(centerX, padding); // 箭头顶点
			ctx.lineTo(centerX - arrowSize/2, padding + arrowSize); // 左下角
			ctx.lineTo(centerX + arrowSize/2, padding + arrowSize); // 右下角
			ctx.closePath();
			ctx.fill();
			
			// 绘制坐标轴标注
			ctx.setFontSize(12);
			ctx.setFillStyle('#666');
			
			// 设置字体加粗
			ctx.font = 'bold 12px sans-serif';
			
			// X轴标注
			// X轴正方向（右端）
			ctx.fillText('耐心', padding + chartW - 30, centerY + 20);
			// X轴反方向（左端）
			ctx.fillText('不耐烦', padding, centerY + 20);
			
			// Y轴标注
			// Y轴正方向（上端）
			ctx.fillText('负担小', centerX - 45, padding + 15);
			// Y轴反方向（下端）- 调整位置避免超出Canvas边界和与Y轴重合
			ctx.fillText('事多', centerX - 35, padding + chartH - 10);
			
			// 绘制所有乘务长的坐标点 - 只显示黑色点，不高亮任何用户
			console.log('准备绘制', this.allCoordinates.length, '个坐标点');
			this.allCoordinates.forEach((person, index) => {
				console.log(`绘制第${index + 1}个点:`, person);
				
				// 将数据坐标转换为画布坐标
				const canvasX = padding + (person.x - minCoord) / coordRange * chartW;
				const canvasY = padding + (maxCoord - person.y) / coordRange * chartH; // Y轴翻转
				
				// 所有乘务长：统一使用黑色
				ctx.beginPath();
				ctx.setFillStyle('#333'); // 统一黑色
				ctx.arc(canvasX, canvasY, 4, 0, Math.PI * 2);
				ctx.fill();
			});
			
			ctx.draw();
		},
		navigateToDetail(item) {
			console.log('准备跳转到详情页，item:', item);
			if (!item || !item.id) {
				console.error('跳转失败：没有有效的ID');
				return;
			}
			
			// 判断是乘务长评分还是其他评分
			if (this.activeTab === 0) {
				// 乘务长评分跳转到detail页面
				uni.navigateTo({
					url: '/pages/score/detail/detail?id=' + item.id,
					success: function() {
						console.log('跳转成功');
					},
					fail: function(err) {
						console.error('跳转失败:', err);
					}
				});
			} else {
				// 其他评分跳转到other页面
				uni.navigateTo({
					url: '/pages/score/other/other?id=' + item.id + '&name=' + item.name + '&score=' + item.score + '&type=' + this.ratingTypes[this.selectedRatingType],
					success: function() {
						console.log('跳转到other页面成功');
					},
					fail: function(err) {
						console.error('跳转失败:', err);
					}
				});
			}
		},
		handleTouchStart(e) {
			const touch = e.touches[0];
			this.startX = touch.clientX || touch.pageX;
			this.startY = touch.clientY || touch.pageY;
			this.startTime = Date.now();
		},
		handleTouchMove(e) {
			// 在滑动过程中什么都不做，避免影响滚动
		},
		handleTouchEnd(e) {
			const touch = e.changedTouches[0];
			const endX = touch.clientX || touch.pageX;
			const endY = touch.clientY || touch.pageY;
			
			const deltaX = endX - this.startX;
			const deltaY = endY - this.startY;
			const duration = Date.now() - this.startTime;
			
			// 判断是否为水平滑动
			if (Math.abs(deltaY) > Math.abs(deltaX) || Math.abs(deltaX) < 50) {
				return;
			}
			
			// 判断滑动速度和距离
			const velocity = Math.abs(deltaX) / duration;
			const isValidSwipe = Math.abs(deltaX) > 80 || (velocity > 0.3 && Math.abs(deltaX) > 30);
			
			if (!isValidSwipe) return;
			
			// 隐藏提示
			this.showSwipeHint = false;
			
			// 优先处理内部tab切换逻辑
			if (deltaX < 0) {
				// 向左滑动（从右往左）
				if (this.activeTab === 0) {
					// 在乘务长页面，左滑切换到其他评分页面
					this.switchTab(1);
					uni.showToast({
						title: '切换到其他评分',
						icon: 'none',
						duration: 1000
					});
					return;
				} else {
					// 在其他评分页面，左滑跳转到换班页面（TabBar切换）
					uni.switchTab({
						url: '/pages/schedule/index',
						success: () => {
							uni.showToast({
								title: '切换到换班',
								icon: 'none',
								duration: 1000
							});
						}
					});
					return;
				}
			} else {
				// 向右滑动（从左往右）
				if (this.activeTab === 1) {
					// 在其他评分页面，右滑切换到乘务长页面
					this.switchTab(0);
					uni.showToast({
						title: '切换到乘务长评分',
						icon: 'none',
						duration: 1000
					});
					return;
				} else {
					// 在乘务长页面，右滑跳转到打听事页面（TabBar切换）
					uni.switchTab({
						url: '/pages/index/index',
						success: () => {
							uni.showToast({
								title: '切换到打听事',
								icon: 'none',
								duration: 1000
							});
						}
					});
					return;
				}
			}
		},
		getPageName(index) {
			const names = ['打听事', '评分', '换班', '我的'];
			return names[index] || '未知页面';
		}
	}
}
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: #f6f7fb;
	padding-bottom: 30rpx;
}

/* 顶部导航 */
.nav-bar {
	background-color: #fff;
	padding-bottom: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.status-bar {
	height: var(--status-bar-height);
}

.nav-content {
	padding: 20rpx 30rpx 0;
}

.page-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.tab-row {
	display: flex;
	border-bottom: 1rpx solid #eee;
	justify-content: center;
}

.tab {
	position: relative;
	padding: 20rpx 40rpx;
	font-size: 28rpx;
	color: #666;
	flex: 1;
	text-align: center;
	
	&.active {
		color: #6c5ce7;
		font-weight: 500;
		border-bottom: 4rpx solid #6c5ce7;
	}
}

/* 搜索框 */
.search-box {
	margin: 20rpx 20rpx 30rpx;
	display: flex;
	height: 100rpx;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.search-input {
	flex: 1;
	background-color: #fff;
	display: flex;
	align-items: center;
	padding: 0 20rpx;
	
	input {
		flex: 1;
		font-size: 28rpx;
		color: #333;
		height: 100%;
		line-height: 1.4;
		
		&::placeholder {
			color: #999;
			font-size: 28rpx;
		}
	}
}

.company-select {
	display: flex;
	align-items: center;
	padding-right: 20rpx;
	margin-right: 20rpx;
	border-right: 1rpx solid #eee;
	font-size: 26rpx;
	color: #333;
	min-width: 120rpx;
	max-width: 140rpx;
	white-space: nowrap;
	height: 100%;
	overflow: hidden;
	
	text {
		line-height: 1.4;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	uni-icons {
		margin-left: 8rpx;
		flex-shrink: 0;
	}
}

.search-btn {
	width: 88rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #6c5ce7;
	transition: background-color 0.2s ease;
	
	&:active {
		background-color: #5a4fcf;
	}
	
	uni-icons {
		color: #fff;
	}
}

/* 卡片通用样式 */
.score-card, .stats-card, .chart-card, .rating-card {
	margin: 0 30rpx 30rpx;
	border-radius: 8rpx;
	background-color: #fff;
	box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
	overflow: hidden;
}

/* 评分卡片 */
.score-card {
	padding: 30rpx;
}

.score-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.id-box {
	.id-label {
		font-size: 24rpx;
		color: #999;
		margin-right: 10rpx;
	}
	
	.id-value {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
	}
}

.score-box {
	display: flex;
	align-items: baseline;
	
	.score-value {
		font-size: 64rpx;
		font-weight: 600;
		color: #6c5ce7;
		line-height: 1;
	}
	
	.score-unit {
		font-size: 24rpx;
		color: #6c5ce7;
		margin-left: 5rpx;
	}
}

.divider {
	height: 1rpx;
	background-color: #f0f0f0;
	margin: 20rpx 0;
}

.info-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.type-info {
	font-size: 26rpx;
	color: #333;
	
	.label {
		color: #999;
		margin-right: 10rpx;
	}
}

.eval-count {
	font-size: 24rpx;
	color: #999;
	padding: 6rpx 15rpx;
	background-color: #f5f5f5;
	border-radius: 15rpx;
}

/* 统计卡片 */
.card-header {
	padding: 20rpx 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
	
	.title {
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
	}
}

.stats-content {
	padding: 30rpx;
	display: flex;
	align-items: center;
}

.stats-text {
	margin-left: 20rpx;
}

.stats-number {
	font-size: 36rpx;
	font-weight: 600;
	color: #333;
	display: block;
	margin-bottom: 5rpx;
}

.stats-desc {
	font-size: 24rpx;
	color: #999;
}

/* 散点图卡片 */
.chart-content {
	padding: 10rpx;
	position: relative;
}

.scatter-canvas {
	width: 100%;
	height: 750rpx; /* 确保Canvas完整显示，保持正方形比例 */
	background-color: #fafafa;
	border-radius: 8rpx;
}

.legend {
	display: flex;
	justify-content: center;
	padding-top: 20rpx;
	border-top: 1rpx solid #f0f0f0;
	gap: 15rpx;
}

.legend-item {
	display: flex;
	align-items: center;
	margin: 5rpx 10rpx;
	font-size: 24rpx;
	color: #666;
}

.color-dot {
	width: 20rpx;
	height: 20rpx;
	border-radius: 50%;
	margin-right: 10rpx;
	
	&.others {
		background-color: #333; // 黑色，与绘制逻辑一致
	}
}

/* 空状态样式 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 0;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
	margin-top: 30rpx;
}

/* 其他评分页面样式 */
.rating-type-selector {
	margin: 20rpx 30rpx;
	background-color: #fff;
	border-radius: 8rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.rating-type-scroll {
	white-space: nowrap;
	
	/* 隐藏滚动条 */
	&::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		background: transparent;
	}
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE and Edge */
}

.rating-type-item {
	display: inline-block;
	padding: 24rpx 40rpx;
	font-size: 28rpx;
	color: #666;
	position: relative;
	
	&.active {
		color: #6c5ce7;
		font-weight: 500;
		
		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 20%;
			width: 60%;
			height: 4rpx;
			background-color: #6c5ce7;
			border-radius: 2rpx;
		}
	}
}

.rating-list {
	padding-bottom: 30rpx;
}

.rating-card {
	padding: 30rpx;
	margin-bottom: 20rpx;
}

.rating-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.rating-name {
	font-size: 32rpx;
	font-weight: 500;
	color: #333;
	display: flex;
	flex-direction: column;
	
	.rating-type {
		font-size: 22rpx;
		color: #999;
		margin-top: 8rpx;
		font-weight: normal;
	}
}

.rating-value {
	font-size: 48rpx;
	font-weight: 600;
	color: #6c5ce7;
}

.rating-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.rating-counts {
	display: flex;
}

.count-item {
	margin-right: 30rpx;
	display: flex;
	flex-direction: column;
	
	.count-label {
		font-size: 22rpx;
		color: #999;
	}
	
	.count-value {
		font-size: 28rpx;
		color: #333;
		margin-top: 8rpx;
		
		&.positive {
			color: #2ecc71;
		}
	}
}

.rating-time {
	font-size: 22rpx;
	color: #999;
}

.load-more {
	text-align: center;
	padding: 30rpx 0;
	font-size: 28rpx;
	color: #6c5ce7;
	background-color: #fff;
	margin: 0 30rpx;
	border-radius: 8rpx;
	box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

/* 滑动提示样式 */
.swipe-hint {
	padding: 12rpx 30rpx;
	background: linear-gradient(135deg, #6c5ce7, #a29bfe);
	text-align: center;
	animation: fadeInOut 3s ease-in-out;
}

.hint-text {
	font-size: 22rpx;
	color: #fff;
	opacity: 0.9;
}

@keyframes fadeInOut {
	0%, 100% { opacity: 0; transform: translateY(-5rpx); }
	20%, 80% { opacity: 1; transform: translateY(0); }
}
</style>
